import { CheckCircleFilled, CloseCircleFilled } from "@ant-design/icons";
import { Col, Row } from "antd";
import dayjs from 'dayjs';
import { useEffect, useState } from "react";
import client from '../../utils/client';

export default function LicenseInfo() {
  const [state, setState] = useState({});

  useEffect(() => {
    client.job('LicenseInfo').then(info => setState(info));
  }, []);

  if (state.Activated == null) return;

  const valid_years = state.Activated ? state.NotAfter.diff(state.NotBefore, 'year') : 0;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>

      <h1 style={{ margin: 30, fontWeight: 'bold' }}>
        {
          state.Activated ? (
            <span>已注册 <CheckCircleFilled style={{ color: 'green' }} /></span>
          ) : (
            <span>未注册 <CloseCircleFilled style={{ color: 'red' }} /></span>
          )
        }
      </h1>

      <Row style={{ width: 400, lineHeight: '36px' }}>
        <Col span={6}>设备码: </Col>
        <Col span={18}>{state.DeviceCode}</Col>
      </Row>

      {
        state.Activated ? (
          <>
            <Row style={{ width: 400, lineHeight: '36px' }}>
              <Col span={6}>注册码: </Col>
              <Col span={18}>{state.SerialNumber}</Col>
            </Row>
            <Row style={{ width: 400, lineHeight: '36px' }}>
              <Col span={6}>有效日期: </Col>
              <Col span={18}>{valid_years >= 200 ? '永久' : state.NotAfter.format('YYYY-MM-DD') + ' ( ' + state.NotAfter.diff(dayjs(), 'day') + '天 )'}</Col>
            </Row>
          </>
        ) : null
      }
    </div>
  );
}